<template>
  <a-card :style="{ width: '100%', height: '100%' }" :title="title">
    <template #extra>
      <a-tag color="arcoblue">{{ linkTitle }}</a-tag>
    </template>
    <div class="card-content-inner">
      <div class="card-title card-list-item">
        <div class="rank">排行</div>
        <div class="name">模板名称</div>
        <div class="ratio">通过率</div>
      </div>
      <div class="card-list">
        <div class="card-list-item" v-for="item in computedArr" :key="item.rank">
          <div class="rank">
            <div class="rank-item" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
              {{ item.rank }}
            </div>
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="ratio">{{ item.ratio }}</div>
        </div>
      </div>
      <a-pagination
        v-model:current="currentpage"
        :show-total="true"
        style="margin-top: 10px; justify-content: center"
        size="small"
        :total="dataArr.length"
      />
    </div>
  </a-card>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  linkTitle: {
    type: String,
    default: '全部'
  },
  dataArr: {
    type: Array,
    default: []
  }
})
const list = [
  {
    rank: 1,
    name: 'xxxx',
    ratio: '90%'
  },
  {
    rank: 2,
    name: 'xxxx',
    ratio: '84%'
  },
  {
    rank: 3,
    name: 'xxxx',
    ratio: '80%'
  },
  {
    rank: 4,
    name: 'xxxx',
    ratio: '90%'
  },
  {
    rank: 5,
    name: 'xxxx',
    ratio: '84%'
  },
  {
    rank: 6,
    name: 'xxxx',
    ratio: '80%'
  },
  {
    rank: 7,
    name: 'xxxx',
    ratio: '90%'
  },
  {
    rank: 8,
    name: 'xxxx',
    ratio: '84%'
  },
  {
    rank: 9,
    name: 'xxxx',
    ratio: '80%'
  },
  {
    rank: 10,
    name: 'xxxx',
    ratio: '80%'
  }
]
const currentpage = ref(1)
const computedArr = computed(() => {
  return props.dataArr.slice((currentpage.value - 1) * 10, currentpage.value * 10)
})
</script>

<style lang="scss" scoped>
.card-content-inner {
  .card-title {
    font-weight: bold;
    color: #999;
    margin-bottom: 20px;
  }
  .card-list-item {
    display: flex;
    & + .card-list-item {
      margin-top: 16px;
    }
    & > div {
      flex: 1;
    }
    .name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rank-item {
      min-width: 32px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      color: #fff;
      font-weight: bold;
      background: #e2e2e2;
      border-radius: 4px;
      width: min-content;
    }
    .rank1 {
      background: #de868f;
    }
    .rank2 {
      background: #ffbf6b;
    }
    .rank3 {
      background: #e8d6a8;
    }
  }
}
</style>
